<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
	body,p{margin:0;}
    .box{width:900px;height:400px;background-color:#f1f1f1;}
	#left{width:400px;height:320px;background-color: orange;}
	#left img{width:400px;height:260px;}
	#left,#right{float:left;margin-top:20px;padding:20px;text-align:center; position:relative;}
    #left .sum,#right .sum{position:absolute; bottom:20px;left:20px;}
	#right{width:330px;height:320px;background-color: green;}
    #right img{width:330px;height:260px;}
</style>
<script>
window.onload = function (){
	var aInp = document.getElementsByTagName('input');
	var aImg = document.getElementsByTagName('img');
	var aP = document.getElementsByTagName('p');
	var aSpan = document.getElementsByTagName('span');
	var arrL = [
		['1.jpg','2.jpg','3.jpg'],
		['第一组第1张','第一组第2张','第一组第3张']
	];
	var arrR = [
		['4.jpg','5.jpg','6.jpg','7.jpg'],
		['第二组第1张','第二组第2张','第二组第3张','第二组第4张']
	];
	var numL = 0;
	var numR = 0;
	//初始化
	function fn() {
		aImg[0].src = arrL[0][numL];
		aImg[1].src = arrR[0][numR];
		aP[0].innerHTML = arrL[1][numL];
		aP[1].innerHTML = arrR[1][numR];
		aSpan[0].innerHTML = 1 + numL + '/' + arrL[1].length;
		aSpan[1].innerHTML = 1 + numR + '/' + arrR[1].length;
	}
	fn();
	
	aInp[1].onclick = function (){
		numL ++;
		numR ++;
		if (numL == arrL[0].length) numL=0;
		if (numR == arrR[0].length) numR= 0
		fn();
	}
	
	aInp[0].onclick = function (){
		numL --;
		numR --;
		if (numL == -1) numL= arrL[0].length-1;
		if (numR == -1) numR= arrR[0].length-1;
		fn();
	}
}
</script>
</head>
<body>
	<input type="button" value="上一组">
	<input type="button" value="下一组">
	<div class="box">
		<div id="left">
			<img src="1.jpg">
			<p></p>
			<span class="sum"></span>
		</div>
		<div id="right">
			<img src="">
			<p></p>
			<span class="sum"></span>
		</div>
	</div>
</body>
</html>